'use strict';
import React, {Component, PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {R_header} from './common/index'
import SelectionCycle from "../Component/SelectionCycle";
import Popup from "./common/Popup";
import {HttpService, Toast} from '../Http';

import refresh_white from "../img/refresh_white.png";
import '../plugins/LArea/LArea.js'
export default class Disturb extends Component {
    constructor(props) {
        super(props);
        this.amTimeLeftArray = [];
        this.pmTimeLeftArray = [];
        this.timeRightArray = [];
        this.state = {
            show:false,
            selectCysle:'1,1,1,1,1,0,0',
            cycleVlaue: '上学日',
            powerValue: false,
            admin: {
                flag:false
            },
        };
        this.config = {
            isSure: false,
            isCancel: false,
            content:'重置后，我们将取消您设定的勿扰模式时间段！',
            no: '取消',
            yes: '确定并同步',
            yes_cb: () => {
                if(this.state.powerValue){
                    this.popupHide();
                    Toast.toast('当前设备为在线或已关机，我们无法为您与设备进行同步！');
                    return;
                }
                HttpService.query({
                    url: '/app/object/saveClassSilentInfo',
                    data: {
                        token: localStorage.appToken,
                        babyid: localStorage.babyid,
                        starttimeAM:"00:00",
                        endtimeAM:"00:00",
                        starttimePM:"00:00",
                        endtimePM:"00:00",
                        opencycle:"1,1,1,1,1,0,0",
                    },
                    success: (res => {
                        this.popupHide();
                        if(res.code == 10104){
                            Toast.toast('重置成功！');
                            document.querySelector('.am_after').innerText = '00:00';
                            document.querySelector('.am_front').innerText = '00:00';
                            document.querySelector('.pm_after').innerText = '00:00';
                            document.querySelector('.pm_front').innerText = '00:00';
                            this.getDisCycle([1,1,1,1,1,0,0]);
                            this.setState({selectCysle:'1,1,1,1,1,0,0'});
                        }else{
                            Toast.toast(res.msg);
                        }
                    })
                });
            },
            no_cb: () => {
                this.popupHide();
            }
        };
    }
    componentWillMount() {
        HttpService.query({
            url: '/app/object/getClassSilentInfo',
            data: {
                token: localStorage.appToken,
                babyid: localStorage.babyid
            },
            success: (res => {
                if(res.code == 10106){
                    document.querySelector('.am_after').innerText = res.data.starttimeAM;
                    document.querySelector('.am_front').innerText = res.data.endtimeAM;
                    document.querySelector('.pm_after').innerText = res.data.starttimePM;
                    document.querySelector('.pm_front').innerText = res.data.endtimePM;
                    this.setState({selectCysle:res.data.opencycle});
                    this.getDisCycle(res.data.opencycle.split(','));
                }else{
                    this.setState({selectCysle:'1,1,1,1,1,0,0'});
                    Toast.toast(res.msg);
                }
            })
        });
        //获取电量信息
        HttpService.query({
            url: '/app/alarm/getCurrentPower',
            sync: false,
            data: {
                token: localStorage.appToken,
                babyid: localStorage.babyid,
                weixinclient: 'true'
            },
            success: (res => {
                if (res.code == 10011) {
                    this.setState({powerValue:true})
                }
            })
        });
        for(let i = 0;i<24;i++){
            let num = i,value = 100000+i*10000,leftArray = [];
            if(i<10){
                num = '0'+i;
            }
            if(i<12){
                this.amTimeLeftArray.push({"name": ""+num+"", "value": ""+value+"", "id": ""+num+""});
            }else{
                this.pmTimeLeftArray.push({"name": ""+num+"", "value": ""+value+"", "id": ""+num+""});
            }
            for(let j = 0;j<=59;j++){
                let num = j;
                if(j<10){
                    num = '0'+j;
                }
                leftArray.push({"name": ""+num+"", "value": ""+value+"", "id": ""+num+""});
            }
            this.timeRightArray[""+value+""] = leftArray;
        }
    }

    componentDidMount(){
        new LAreaTwo().init({
            'trigger': '.am_front',
            'valueTo': '.am_front',
            'keys': {
                id: 'value',
                name: 'name',
                ids: 'id',
            },
            'type': 2,
            'data': [this.amTimeLeftArray, this.timeRightArray]
        });
        new LAreaTwo().init({
            'trigger': '.am_after',
            'valueTo': '.am_after',
            'keys': {
                id: 'value',
                name: 'name',
                ids: 'id',
            },
            'type': 2,
            'data': [this.amTimeLeftArray, this.timeRightArray]
        });
        new LAreaTwo().init({
            'trigger': '.pm_front',
            'valueTo': '.pm_front',
            'keys': {
                id: 'value',
                name: 'name',
                ids: 'id',
            },
            'type': 2,
            'data': [this.pmTimeLeftArray, this.timeRightArray]
        });
        new LAreaTwo().init({
            'trigger': '.pm_after',
            'valueTo': '.pm_after',
            'keys': {
                id: 'value',
                name: 'name',
                ids: 'id',
            },
            'type': 2,
            'data': [this.pmTimeLeftArray, this.timeRightArray]
        });
        document.querySelector('#content').style.overflow = 'hidden';
    }
    /**
     * 同步操作
     */
    save(){

        let am_after = document.querySelector('.am_after').innerText;
        let am_front = document.querySelector('.am_front').innerText;
        let pm_after = document.querySelector('.pm_after').innerText;
        let pm_front = document.querySelector('.pm_front').innerText;
        let bj_am_after = parseInt(am_after.replace(":",'')),
            bj_am_front = parseInt(am_front.replace(":",'')),
            bj_pm_after = parseInt(pm_after.replace(":",'')),
            bj_pm_front = parseInt(pm_front.replace(":",''));
        if(am_after=='00:00' && am_front=='00:00' && pm_after=='00:00' && pm_front=='00:00'){
            Toast.toast('时间段设置有误');
            return;
        }else if(bj_am_after > bj_am_front){
            Toast.toast('时间段设置有误');
            return;
        }else if(bj_pm_after > bj_pm_front || (bj_pm_after < 1200 && bj_pm_front>=1200)){
            Toast.toast('时间段设置有误');
            return;
        }

        if(this.state.powerValue){
            debugger
            // this.popupHide();
            Toast.toast('当前设备为在线或已关机，我们无法为您与设备进行同步！');
            return false;
        }
        HttpService.query({
            url: '/app/object/saveClassSilentInfo',
            data: {
                token: localStorage.appToken,
                babyid: localStorage.babyid,
                starttimeAM:am_after,
                endtimeAM:am_front,
                starttimePM:pm_after,
                endtimePM:pm_front,
                opencycle:this.state.selectCysle,
            },
            success: (res => {
                if(res.code == 10104){
                    Toast.toast('设置成功！');
                }else{
                    Toast.toast(res.msg);
                }
            })
        });
    }

    /**
     *
     * @returns {XML}
     */
    setTime(e){
        //绑定事件——改变后就去更新数据
        // document.querySelector('.maskin_area').addEventListener('click', function () {
        //     let gearArea = document.querySelector('.gearArea');
        //     document.body.removeChild(gearArea);
        // });
    }

    /**
     * 设置周期
     */
    setDisCycle(index){
        let array = this.state.selectCysle.split(',');
        if(array[index] == '1'){
            array[index] = 0;
        }else if(array[index] == '0'){
            array[index] = 1;
        }
        this.getDisCycle(array);
        this.setState({selectCysle:array.toString()});
    }

    /**
     * 获取周期
     */
    getDisCycle(array){
        let cycleVlaue = '';
        if(array[0]==1 && array[1]==1 && array[2]==1 && array[3]==1  && array[4]==1 && array[5]==1 && array[6]==1){
            cycleVlaue = '每天'
        }else if(array[0]==1 && array[1]==1 && array[2]==1 && array[3]==1  && array[4]==1 && array[5]==0 && array[6]==0){
            cycleVlaue = '上学日'
        }else if(array[0]==0 && array[1]==0 && array[2]==0 && array[3]==0  && array[4]==0 && array[5]==1 && array[6]==1){
            cycleVlaue = '休息日'
        }else{
            for(let i = 0;i<array.length;i++){
                if(array[i]==1){
                    cycleVlaue += ' 周'+i
                }
            }
            if(cycleVlaue == ''){
                cycleVlaue = '永不'
            }else{
                cycleVlaue = cycleVlaue.substring(1,cycleVlaue.length).replace('0','一').replace('1','二').replace('2','三').replace('3','四').replace('4','五').replace('5','六').replace('6','日');
            }
        }
        console.log(cycleVlaue);
        this.setState({cycleVlaue:cycleVlaue});
    }
    /**
     * 显示选择周期
     * @returns {XML}
     */
    showCycle(){
        this.setState({show:true,admin: {flag: false}});
    }

    /**
     * 重置
     */
    disReset(){
        this.setState({show:false,admin: {flag: true}});
    }

    /**
     * 隐藏弹出层
     */
    popupHide(){
        this.setState({admin: {flag: false}});
    }
    render() {
        let {cycleVlaue,show,selectCysle,admin} = this.state;
        let link = <div className="font_blue" onClick={this.disReset.bind(this)}>重置</div>;
        return (
            <div className='disturb_page'>
                <R_header title="勿扰模式" left="1" end="重置" link={link}/>
                <div className="cycle">
                    <div className="title">周期</div>
                    <div to="/SelectionCycle" id="cycleValue" className="value" onClick={this.showCycle.bind(this)}>{cycleVlaue}</div>
                </div>
                <div className="disturb_am">
                    <div className="title">上午</div>
                    <div className="value">
                        <span className="am_front front" onClick={this.setTime.bind(this)}>00:00</span>
                        <span className="line"/>
                        <span className="am_after after" onClick={this.setTime.bind(this)}>00:00</span>
                    </div>
                </div>
                <div className="disturb_pm">
                    <div  className="title">下午</div>
                    <div className="value">
                        <span className="pm_front front" onClick={this.setTime.bind(this)}>00:00</span>
                        <span className="line"/>
                        <span className="pm_after after" onClick={this.setTime.bind(this)}>00:00</span>
                    </div>
                </div>
                <div className="prompt">
                    <div>使用说明:</div>
                    <div>1.设置时间段后，在勿扰模式时间段内，外界将无法向学生证拨打电话;</div>
                    <div>2.设置时间段后，请点击下方同步按钮，成功同步后立即生效。</div>
                </div>
                <div className="disturb_footer" onClick={this.save.bind(this)}>
                    <img src={refresh_white} />
                    <span>须向设备同步才能正常使用该功能</span>
                </div>
                <SelectionCycle show={show} setDisCycle={this.setDisCycle.bind(this)} popupHide={this.popupHide.bind(this)} selectCysle={selectCysle} />
                <Popup config={this.config} blockOrNone={admin.flag} _flag={admin.flag}/>
            </div>
        )
    }
}
